<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="任务编号" align="center" prop="id" :show-overflow-tooltip="true" />
      <el-table-column label="担保类型" align="center" prop="type" :show-overflow-tooltip="true" />
      <el-table-column label="客户姓名" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="客户号" align="center" prop="custNo" />
      <el-table-column label="任务生成日" align="center" prop="createTime" />
      <el-table-column label="任务完成日" align="center" prop="finishTime" />
      <el-table-column label="检查状态" align="center" prop="checkType" />
      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="查看" placement="top">
            <el-button link type="primary" icon="View" @click="handleEditTable(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
    <!-- 预览界面 -->
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
// import { reactive, ref, nextTick } from "vue";
import { queryRoleList, modify, addRole, delRole, getDetail, setPermis } from "@/api/role";
import { queryOrgTree } from "@/api/org";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";

const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const loading = ref(false);
const total = ref(0);

const data = reactive({
  queryParams: {
    page_count: 1,
    page_size: 10,
    tableName: undefined,
    tableComment: undefined,
  },
  preview: {
    open: false,
    title: "添加角色",
    data: {},
    activeName: "domain.java",
  },
});

const { queryParams, preview } = toRefs(data);

tableList.value = [
  { id: "1", type: "保后首次检查", name: "zhagnsan", custNo: "0006", createTime: "2020-02-02", finishTime: "2020-03-03", checkType: "未检查" },
  { id: "2", type: "保后常规检查", name: "zhagnsan", custNo: "0006", createTime: "2020-02-02", finishTime: "2020-03-03", checkType: "未检查" },
  { id: "3", type: "保后专项检查", name: "zhagnsan", custNo: "0006", createTime: "2020-02-02", finishTime: "2020-03-03", checkType: "未检查" },
  { id: "4", type: "到期前检查", name: "zhagnsan", custNo: "0006", createTime: "2020-02-02", finishTime: "2020-03-03", checkType: "未检查" },
  { id: "5", type: "按揭楼盘检查", name: "zhagnsan", custNo: "0006", createTime: "2020-02-02", finishTime: "2020-03-03", checkType: "未检查" },
];

onMounted(() => {});

function getList() {}

//编辑
function handleEditTable(val) {
  switch (val.type) {
    case "保后首次检查":
      router.push({ path: "first" });
      break;
    case "保后常规检查":
      router.push({ path: "routine" });
      break;
    case "保后专项检查":
      router.push({ path: "special" });
      break;
    case "到期前检查":
      router.push({ path: "expire" });
      break;
    case "按揭楼盘检查":
      router.push({ path: "mortgage" });
      break;
  }
}

// getList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}
:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
